﻿﻿﻿<!-- #layout name=blank-->

<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Synchronization</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a @click.stop="showModalHandle" class="btn green navbar-btn">Create</a>
      <a
        v-if="tableDataSelected.length > 0"
        @click="onDelete"
        class="btn red navbar-btn"
        >Delete</a
      >
    </div>
  </div>
  <kb-table
    :show-select="true"
    :data="tableData"
    :selected.sync="tableDataSelected"
  >
    <kb-table-column :label="Kooboo.text.site.sync.remoteSite">
      <template v-slot="row">
        <a
          @click.stop="remoteSiteClickHandle($event, row.id)"
          style="cursor: pointer"
        >
          {{row.remoteSiteName}}
        </a>
      </template>
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.site.sync.server">
      <template v-slot="row">
        <span class="label label-sm blue">{{row.remoteServerUrl}}</span>
      </template>
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.site.sync.difference">
      <template v-slot="row">
        <span class="badge blue">{{row.difference}}</span>
      </template>
    </kb-table-column>
  </kb-table>

  <div
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
    v-kb-modal="isShowModal"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button @click="hidelModalHandle" class="close"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">New publishing</h4>
        </div>
        <div class="modal-body">
          <kb-form>
            <kb-form-item>
              <div class="form-horizontal">
                <label class="control-label col-md-2">Server</label>
                <div class="col-md-10">
                  <div class="form-inline">
                    <select
                      v-model="currentServer"
                      class="form-control input-xlarge"
                    >
                      <option v-for="item in allServers" :value="item"
                        >{{item.name}}</option
                      >
                    </select>
                    <button
                      class="btn btn-default pull-right"
                      @click="manageServerHandle"
                      :title="Kooboo.text.common.config"
                      ><i class="fa fa-gear"></i
                    ></button>
                  </div>
                </div>
              </div>
            </kb-form-item>

            <kb-form-item v-kb-collapsein="isNextStep">
              <label class="control-label col-md-2">Site name</label>
              <div class="form-inline col-md-10">
                <select
                  v-model="selectedSite"
                  class="form-control input-xlarge"
                >
                  <option v-for="item in avaliableSites" :value="item"
                    >{{item.name}}</option
                  >
                </select>
                <button
                  class="btn btn-default pull-right"
                  @click="showCreateSiteModalHandle"
                  :disabled="ableAddSite"
                  ><i class="fa fa-plus"></i
                ></button>
              </div>
            </kb-form-item>

            <kb-form-item v-kb-collapsein="isNextStep">
              <div class="col-md-10 col-md-offset-2">
                <div class="form-horizontal">
                  <label
                    class="radio-inline"
                    v-for="(pushType,index) in pushTypes"
                  >
                    <input
                      type="radio"
                      name="pushType"
                      :checked="index===0"
                      @input="pushTypeRadioChange($event,pushType)"
                    />
                    {{pushType.displayName}}
                  </label>
                </div>
              </div>
            </kb-form-item>
          </kb-form>
        </div>
        <div class="modal-footer">
          <button v-if="!isNextStep" @click="nextStepHandle" class="btn blue"
            >Next</button
          >
          <button v-else @click="saveHandle" class="btn blue">Save</button>
        </div>
      </div>
    </div>
  </div>

  <!--管理服务器modal-->
  <div
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
    v-kb-modal="isShowManageServerModal"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" @click="hideManageServerModal"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Manage servers</h4>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
            <kb-table
              :show-select="false"
              :data="editableServers"
              :hide-empty="true"
            >
              <kb-table-column :label="Kooboo.text.system.serverName">
                <template v-slot="row">
                  <div v-if="!row.editable">{{ !row.editable && row.name}}</div>
                  <div v-else>
                    <input
                      v-model="row.name"
                      type="text"
                      class="form-control"
                      v-kb-hint:bottom="row.validateModel.name.msg"
                    />
                  </div>
                </template>
              </kb-table-column>
              <kb-table-column :label="Kooboo.text.system.serverAddress">
                <template v-slot="row">
                  <div v-if="!row.editable"
                    >{{ !row.editable && row.serverUrl }}</div
                  >
                  <div v-else>
                    <input
                      v-model="row.serverUrl"
                      type="text"
                      class="form-control"
                      v-kb-hint:bottom="row.validateModel.serverUrl.msg"
                    />
                  </div>
                </template>
              </kb-table-column>
              <kb-table-column>
                <template v-slot="row">
                  <div v-if="!row.editable">
                    <button
                      @click="deleteEditableServers($event,row)"
                      class="btn btn-sm red pull-right"
                      :title="Kooboo.text.common.delete"
                      ><i class="fa fa-close"></i
                    ></button>
                    <button
                      @click="editEditableServers($event,row)"
                      class="btn btn-sm blue pull-right"
                      :title="Kooboo.text.common.edit"
                      ><i class="fa fa-pencil"></i
                    ></button>
                  </div>
                  <div v-else>
                    <button
                      @click="cancelEditEditableServers($event,row)"
                      class="btn btn-sm red pull-right"
                      :title="Kooboo.text.common.cancel"
                      ><i class="fa fa-close"></i
                    ></button>
                    <button
                      @click="saveEditableServers($event,row)"
                      class="btn btn-sm blue pull-right"
                      :title="Kooboo.text.common.save"
                      ><i class="fa fa-save"></i
                    ></button>
                  </div>
                </template>
              </kb-table-column>
            </kb-table>
            <button
              @click="addNewAbleServersHandle"
              v-show="ableAddNewServer"
              class="btn btn-default"
              ><i class="fa fa-plus"></i
            ></button>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" @click="hideManageServerModal"
            >Ok</button
          >
        </div>
      </div>
    </div>
  </div>

  <!--新建站点modal-->
  <div
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
    v-kb-modal="showCreateSiteModal"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button @click="hideCreateSiteModalHandle" class="close"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Create a new site</h4>
        </div>
        <div class="modal-body">
          <kb-form
            simple
            class="form-horizontal"
            ref="createSiteForm"
            :model="remoteSiteModel"
            :rules="remoteSiteRules"
          >
            <kb-form-item
              class="form-group"
              prop="remoteSiteName"
              v-slot="error"
            >
              <div
                :class="{'has-error' : !!error.error}"
                id="site-name-error-container"
              >
                <label class="control-label col-md-2">Site name</label>
                <div class="col-md-10">
                  <input
                    :value="remoteSiteModel.remoteSiteName"
                    @input="remoteSiteNameChangeHandle"
                    type="text"
                    class="form-control input-medium"
                    placeholder="Site name"
                    v-kb-tooltip:right.manual.error="error.error"
                    data-container="#site-name-error-container"
                  />
                  <span class="help-block"
                    >Start with letters and no space allowed.</span
                  >
                </div>
              </div>
            </kb-form-item>

            <kb-form-item class="form-group" prop="preDomain" v-slot="error">
              <div
                :class="{'has-error' : !!error.error}"
                id="site-domain-error-container"
              >
                <label class="control-label col-md-2">Domain</label>
                <div class="col-md-10">
                  <div class="form-inline">
                    <input
                      type="text"
                      v-model="remoteSiteModel.preDomain"
                      class="form-control input-medium"
                      placeholder="Sub domain"
                    />
                    <select
                      v-model="remoteSiteModel.suffixDomain"
                      class="form-control"
                      v-kb-tooltip:right.manual.error="error.error"
                      data-container="#site-domain-error-container"
                    >
                      <option
                        v-for="item in avaliableRemoteDomain"
                        :value="item.domainName"
                        >{{item.domainName}}</option
                      >
                    </select>
                  </div>
                  <span class="help-block"
                    >Give your site a domain that other people can access.</span
                  >
                </div>
              </div>
            </kb-form-item>
          </kb-form>
        </div>
        <div class="modal-footer">
          <button class="btn green" @click="createRemoteSite">Create</button>
          <button class="btn gray" @click="hideCreateSiteModalHandle"
            >Cancel</button
          >
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo/Guid.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/SPA.js",
      "/_Admin/Scripts/components/kbForm.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Sync.js"></script>
